<template>
<div class='roles'>
  <!--头部-->
  <!-- <div class="btn">
    <Input placeholder="添加角色名字" style="width: 300px" size='large' v-model="value" />
    <Button type="info" size='large' @click="addRole">添加</Button>
    <Button type="error" size='large' @click="deleTeRole(0)">删除</Button>
  </div> -->
   <Form style="width:100%;">
        <FormItem label="角色名字" style="float: left;">
            <Input v-model="value" placeholder="添加角色名字"></Input>
        </FormItem >
        <FormItem label="角色描述" style="float: left;">
            <Input v-model="addMark" placeholder="请输入角色描述"></Input>
        </FormItem >
        <FormItem style="margin-left:30px;text-align: left;">
             <Button type="info" size='large' @click="addRole">添加</Button>
            <span></span>
            <!-- <Button type="error" size='large' @click="deleTeRole(0)">删除</Button> -->
        </FormItem >
    </Form>

  <!--表格-->
  <Table border :columns="columns12" :data="data6" @on-select='change'>
    <template slot-scope="{ row }" slot="name" style="width:100px">
      <strong>{{ row.r_name }}</strong>
    </template>
    <template slot="action" slot-scope="{row}">
      <Button type="success" size="small" style="margin-right: 5px" @click="show(row)">修改</Button>
    </template>
  </Table>

  <!--遮罩层-->
  <Modal v-model="modal5" title="修改角色" width="600" :draggable="true" @on-cancel="cancel" @on-ok="UpdateRole">
    <p class='mod'>
      <span>ID:</span>
      <Input style="width: 300px" disabled v-model="value1" type="number" />
    </p>
    <p class='mod'>
      <span>角色:</span>
      <Input style="width: 300px" v-model="value2" />
    </p>
    <p class='mod'>
      <span>角色描述:</span>
      <Input style="width: 300px" v-model="value4" />
    </p>
    <p class='mod'>
      <span>角色排序:</span>
      <Input style="width: 300px" v-model="value3" type="number"/>
    </p>
    <p class='mod'>
      <span>角色状态:</span>
      <Input style="width: 300px" v-model="value5" type="number"/>
    </p>
  </Modal>

</div>
</template>

<script>
import conf from '@/api/apiConf'
export default {
  name: 'roles',
  data: () => ({
    addMark:'',
    rowS: '',
    value1: '',
    value2: '',
    value3: '',
    value4: '',
    value5: '',
    value: '',
    roleName: '',
    roleRort: '',
    roleId: '',
    roleMark: '',
    //status: '',
    //定义对话框的显示和隐藏
    modal5: false,
    columns12: [{
        type: 'selection',
        width: 80,
        align: 'center',
      },
      {
        title: 'Id',
        key: 'r_id',
        //width: 400,
        align: 'center',
      },
      {
        title: '角色名称',
        key: 'r_name',
        //width: 400,
        align: 'center',
      },
      {
        title: '角色描述',
        key: 'r_mark',
        //width: 336,
        align: 'center',
      },
      {
        title: '角色排序',
        key: 'r_sort',
        //width: 400,
        align: 'center',
      },
       {
        title: '角色状态',
        key: 'r_status',
        //width: 400,
        align: 'center',
      },
      {
        title: '操作',
        slot: 'action',
        //width: 336,
        align: 'center',
      },
    ],
    data6: [],
  }),
  created() {
    this.GetAllRole()
  },
  methods: {
    //拿到所有的复选框数据
    change(selection, row) {
      this.rowS = row
      console.log(row)
      this.roleId = row.r_id
      this.roleName = row.r_name
      this.roleRort = row.r_sort
      this.roleMark = row.r_mark
      //this.status = row.r_status
    },
    //拿到所有角色
    async GetAllRole() {
      const res = await this.$http.get(conf.GetAllRole)
      if(res.data&&res.data.data){
        this.data6 = res.data.data
      }
      //console.log(this.data6[0].r_id)
    },

    //添加角色
    async addRole() {
      if (this.value == '') return this.$Message.warning('角色名称不能为空')
      let params = new URLSearchParams()
      params.append('roleName', this.value)
      params.append('roleSort', this.data6.length + 1)
      params.append('roleMark', this.addMark)
      //console.log(this.data6.length + 1)
      const res = await this.$http.post(conf.addRole, params)
      this.GetAllRole()
      //console.log(res)
      if (res.status !== 200) return this.$Message.warning('添加失败')
      //添加角色成功
      this.$Message.success('添加成功')
    },

    //获取所有的数据
    show(row) {
      this.modal5 = true
      this.value1 = row.r_id
      this.value2 = row.r_name
      this.value3 = row.r_sort
      this.value4 = row.r_mark
      //this.status = row.r_status
    },
    //更改角色
    async UpdateRole() {
      let params = new URLSearchParams()
      params.append('roleName', this.value2)
      params.append('roleRort', this.value3)
      params.append('roleId', this.value1)
      params.append('roleMark', this.value4)
      params.append('status', this.value5)
      const res = await this.$http.post(conf.UpdateRole, params)
      //console.log(res)
      if (res.data.status !== 200) return this.$Message.warning('更改失败')
      //更改角色成功
      this.GetAllRole()
      this.$Message.success('更改成功')
    },

    //删除角色
    async deleTeRole(index) {
      //console.log(this.value2)
      let params = new URLSearchParams()
      params.append('roleId', this.roleId)
      const res = await this.$http.post(conf.removeRole, params)
      //console.log(res)
      if (res.data.status !== 200) return this.$Message.warning('删除失败')
      //删除角色成功
      this.GetAllRole()
    },
    cancel() {},
  },
}
</script>

<style lang="less" scoped>
.roles{
  padding: 10px;
}
.ivu-modal-body {
  .mod {
    align-content: center;
    padding: 15px 0px;
    color: #000;
    text-align: center;

    span {
      margin-right: 20px;
    }

    .ivu-modal-body {
      padding: 20px 0px;
    }
  }
}

.btn {
  margin-bottom: 30px;
  margin-left: 40px;
  margin-top: 20px;
  .ivu-btn-info {
    margin-left: 30px;
  }

  .ivu-btn-error {
    margin-left: 30px;
  }
}
/deep/.ivu-form{
  .ivu-form-item{
    width: 400px;
    // float: left;
  }
  .ivu-form-item-label{
    width: 100px;
    float: left;
  }
  .ivu-form-item-content{
    width: 300px;
    float: left;
  }
}
</style>
